<template lang="">

  <el-container class="home-container">
    <el-header>

      <el-row>
        <el-col :span="22">
          <h1 class="threed">ulo博客管理系统</h1>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click='returns'>返回博客首页</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 -->
        <el-menu class="el-menu-vertical-demo" background-color="#333744" text-color="#fff" active-text-color="#409BFF"
          unique-opened :collapse='isCollapse' :collapse-transition='false' router :default-active="$route.path">
          <el-menu-item index="/article">
            <i class="el-icon-s-home" style="margin-left: -4px;"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/article/management">
            <i class="el-icon-folder-opened" style="margin-left: -4px;"></i>
            <span slot="title">文章管理</span>
          </el-menu-item>
          <el-menu-item index="/article/add">
            <i class="el-icon-folder-add" style="margin-left: -4px;"></i>
            <span slot="title">文章添加</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main style="overflow: hidden;">
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
    export default {
        data() {
            return {
                // 是否折叠
                isCollapse: false,
            }
        },
        methods: {
            // 点击按钮，切换菜单的折叠与展开
            toggleCollapse() {
                this.isCollapse = !this.isCollapse
            },
            //去博客首页
            returns() {
                this.$router.push('/')
            }
        },
    }
</script>
<style lang="less" scoped>
    .home-container {
        height: 100%;
    }
    
    .el-header {
        background-color: #373d41;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #333744;
        .el-menu {
            border-right: none;
        }
    }
    
    .el-main {
        background-color: #eaedf1;
    }
    
    .iconfont {
        margin-right: 10px;
    }
    
    .toggle-button {
        background-color: #4a5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    
    .threed {
        color: #fafafa;
        letter-spacing: 0;
        font-size: 25px !important;
        text-align: center;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    }
</style>